<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pics{
            width: 1121px;
            border: solid 0px red;
            position: relative;
            margin: 0 auto;
        }
        #pics>.lleft>img{
            position: absolute;
            top: 225px;
            left: 0;
            /* 点击显示小手 */
            cursor: pointer;
            display: none;
        }
        #pics>.lright>img{
            position: absolute;
            top: 225px;
            right: 0;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div id="pics">
        <img id="img" width="1120px" src="img/p1.jpg" alt="404">
        <div class="lleft">
            <img id="i1" width=50px height=80px src="img/left.jpg" alt="">
        </div>
        <div class="lright">
            <img id="i2" width="50px" height="80px" src="img/right.jpg" alt="">
        </div>
    </div>
 </body>
    <script>
        //新建一个数组保存全部图片的地址
        var arrImgs = ['img/p1.jpg','img/p2.jpg','img/p3.jpg'];
        //获取幻灯片事件
        var pic=document.getElementById("pics");
        //获取右侧点击按钮对象
        var rright=document.getElementsByClassName("lright")[0];
        //获取左侧单击按钮对象
        var lleft=document.getElementsByClassName("lleft")[0];
        // 鼠标移入事件
        pic.onmouseover=function(){
            document.getElementById("i1").style.display="block";
            document.getElementById("i2").style.display="block";
        }
        //鼠标移出事件
        pic.onmouseout=function(){
            document.getElementById("i1").style.display="none";
            document.getElementById("i2").style.display="none";
        }
        //定义一个下标变量
        var index=0;
        //绑定按钮的事件
        rright.onclick=function(){
            //console.log("test");
            index++;
            //判断是否超过最大值
            if(index==arrImgs.length){
                index=0;
            }
            //通过setAttribute函数更改元素属性
            document.getElementById("img").setAttribute("src",arrImgs[index]);
        }
        lleft.onclick=function(){
            //让下标值为数组长度，每次减一
            if(index==0)
                index=arrImgs.length;
            index--;
            document.getElementById("img").setAttribute("src",arrImgs[index]);
        }     
    </script>
</body>
</html>